<template>
	<view>
		<unicloud-db collection="list" v-slot:default="{ data, loading }" ref="udb" :page-size="10">
			<view class="list-item" v-for="(item, index) in data" :key="index"
				@click="$router.push('/pages/detail/detail?id=' + item._id)">
				<view class="left">
					<image :src="item.image" mode=""></image>
				</view>
				<view class="right">
					<view class="title">{{item.title}}</view>
					<view class="desc">{{item.desc}}</view>
					<view class="datetime">{{item.datetime}}</view>
					<view class="price">{{item.price}}</view>
				</view>
			</view>
			<view v-show="loading" class="pull-down-loading">数据加载中...</view>
		</unicloud-db>
	</view>
</template>

<script>
	export default {
		onReachBottom() {
			this.$refs.udb.loadMore();
		},
		onPullDownRefresh() {
			this.$refs.udb.loadData({
				// 是否清空数据和分页信息
				clear: true
			}, () => {
				// 停止下拉刷新
				uni.stopPullDownRefresh()
			})
		}
	}
</script>

<style lang="scss" scoped>
	.pull-down-loading {
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.list-item {
		display: flex;

		.left {
			width: 300rpx;
			height: 240rpx;
			flex-shrink: 0;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>